import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList,
    TouchableOpacity,
    Modal, DeviceEventEmitter
} from 'react-native';
import Swiper from 'react-native-swiper';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AsyncStorage from '@react-native-community/async-storage';
const { width, height } = Dimensions.get('window');
import Styles from './Styles';

import Ugame from '../../../../Ugame';
import Httpc from "../../../utils/Httpc";
import DLTREQUEST from './DLTREQUEST';
import Utils from "../../../utils/Utils";
import DLTBall from "./DLTBall";
import CountDown from '../../../compents/countDown/CountDown';

import RootSiblings from 'react-native-root-siblings';

var elements = [];
var id = 0;

var BETTYPE = {
    One: 0,
    Multiple: 1,
    Bladder: 2
}

export default class DLTGame extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            toastModelVisible: false,
            message: 'message',
            serverData: null,
            CDownTime: 0,
            Content: '',
            single_type: ["标准投注", "胆拖投注"],
            curr_single_type: 0,

            DLTBox_count: 0,//号码蓝数量
            red_random_count: 5,//红球随机数量
            blue_randow_count: 2,//蓝球随机数量
            red_front_bladder_random_count: 1,//红球胆码选择0-4
            red_after_bladder_random_count: 5,//红球拖码2-35
            blue_front_bladder_random_count: 1,//蓝球胆码选择0-1
            blue_after_bladder_random_count: 2,//蓝球拖码2-12
            popup_state: [0, 0, 0, 0, 0, 0],

            //红胆
            red_bladder: [],
            //蓝胆
            blue_bladder: [],

            red_ball: [],//红球
            blue_ball: [],//篮球

            BetNumber: null,
            betRecords: null,
            betCount: 0,
            betAmount: 0,

            Number: '',//期号
            Opentime: '',//开奖时间
            PreNum: '',//遗漏
            nowtime: '',//当前服务器时间          
            countdown: 0,//倒计时
            countdowning: 0,


        };
        this.getServerData = this.getServerData.bind(this);
        this._time = null;
        this.hide_state = false;
        this.countdown = 0;
        this.selected_id = -1;
    }
    static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        let curr_single_type = navigation.getParam('curr_single_type');
        let title = curr_single_type == 0 ? "标准投注" : "胆拖投注";
        return {
            headerTitle: () => (
                <View style={Styles.header}>
                    <View></View>
                    <TouchableOpacity onPress={navigation.getParam('show_single_type')}>
                        <View style={Styles.header_title}>
                            <Text style={{ color: '#ffffff' }}>{title}</Text>
                            <Image resizeMode="cover" style={{ width: 12, height: 14 }} source={require('../../../image/js_img_nav_arrows.png')} />
                        </View>
                    </TouchableOpacity>
                    <View style={Styles.header_right}>
                        <TouchableOpacity onPress={navigation.getParam('show_right_menu')}>
                            <View style={{ width: 22, height: 17 }}>
                                <Image resizeMode="cover" style={{ width: 22, height: 17 }} source={require('../../../image/js_img_nav_menu.png')} />
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            ),
            headerStyle: {
                backgroundColor: '#d0162e',
                paddingTop: 18,
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                //fontWeight: 'bold',
            },
        };
    };
    componentWillMount() {
        //组件将要被加载到视图之前调用


    }
    componentDidMount() {
        // 在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作
        // *** 因为UI已经成功渲染，而且这里面是异步的，所以放在这个函数进行数据的请求等复杂的操作，不会出现UI错误**
        let curr_single_type = this.state.curr_single_type;
        this.props.navigation.setParams({ curr_single_type: curr_single_type });
        this.props.navigation.setParams({ show_single_type: this.show_single_type });
        this.props.navigation.setParams({ show_right_menu: this.show_right_menu });
        const { navigation } = this.props;
        this.setState({
            CDownTime: navigation.getParam("CDownTime"),
            Content: navigation.getParam("Content")
        }, () => {
            this.getServerData(() => {

            });
        });
        this.listener = DeviceEventEmitter.addListener('update_betNumber', (value) => {
            //这里面是要调用的方法，比如：刷新
            //value:是下面页面在 通知 时 ，所传递过来的参数
            if (Object.keys(value).length == 0) {
                this.clear_bet_update();
            } else {
                this.selected_id = value.selected_id;
                var BetNumber = Ugame.DLTSelectList[value.selected_id].BetNumber.BetNumber;
                let red_bladder = [], blue_bladder = [], red_ball = [], blue_ball = [];
                let balls = BetNumber.split('|');
                var red_balls = balls[0].split('#');
                if (balls[0].indexOf('#') != -1) {
                    red_bladder = red_balls[0].split(',');
                    red_ball = red_balls[1].split(',');
                } else {
                    red_ball = red_balls[0].split(',');
                }
                var blue_balls = balls[1].split('#');
                if (balls[1].indexOf('#') != -1) {
                    blue_bladder = blue_balls[0].split(',');
                    blue_ball = blue_balls[1].split(',');
                } else {
                    blue_ball = blue_balls[0].split(',');
                }
                this.setState({
                    //红胆
                    red_bladder: red_bladder,
                    //蓝胆
                    blue_bladder: blue_bladder,
                    red_ball: red_ball,//红球
                    blue_ball: blue_ball,//篮球
                }, () => {
                    this.betNumberComb();
                });
            }
        });
        this.listener = DeviceEventEmitter.addListener('update_DLTBox', (value) => {
            this.setState({
                DLTBox_count: Ugame.getDLTBoxCount()
            });
        });

    }
    componentWillUnmount() {
        if (!!this.listener) this.listener.remove();
        if (elements.length > 0) {
            this.destroySibling();
        }

    }
    getServerData = (func) => {
        Httpc.get(DLTREQUEST.DLTGameList, {}, (res) => {
            let result = res.Data[0];
            let nowtime = result.nowtime.substr(0, 19).replace(/-/g, '/');
            let Opentime = result.Opentime.substr(0, 19).replace(/-/g, '/');
            nowtime = new Date(nowtime).getTime();
            Opentime = new Date(Opentime).getTime();
            this.countdown = parseInt((Opentime - nowtime) / 1000);

            this.setState({
                Number: result.Number,//期号
                nowtime: result.nowtime,//当前服务器时间
                Opentime: result.Opentime,//开奖时间
                PreNum: result.PreNum,//遗漏                
            }, () => {

            })
        })
    }

    change_single_type = (index) => {
        let { curr_single_type } = this.state;
        if (index == curr_single_type) {
            return;
        }
        this.props.navigation.setParams({ curr_single_type: index });
        this.destroySibling();
        this.setState({
            curr_single_type: index,
            //红胆
            red_bladder: [],
            //蓝胆
            blue_bladder: [],
            red_ball: [],//红球
            blue_ball: [],//篮球
            betNumber: null,
            betRecords: null,
            betCount: 0,
            betAmount: 0,
        });
    }
    renderSingleType(curr_single_type) {
        let single_type = this.state.single_type;
        var itemArr = [];
        for (let i = 0; i < single_type.length; i++) {
            let data = single_type[i];
            let index = i;
            itemArr.push(
                <TouchableOpacity key={index} onPress={() => this.change_single_type(index)}>
                    <View >
                        <Text style={curr_single_type == index ? Styles.cate_item_on : Styles.cate_item}>{data}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    _show_single_type_model = () => {
        let { single_type, curr_single_type } = this.state;
        return (
            <TouchableOpacity style={Styles.sibling} onPress={this.destroySibling}>
                <View style={Styles.cate_menu}>
                    <View style={Styles.cate_list}>
                        {this.renderSingleType(curr_single_type)}
                    </View>
                </View>
            </TouchableOpacity >
        );
    }
    on_go_gameorder = () => {
        if (!Ugame.isLogin()) {
            this.props.navigation.navigate('Login');
        } else {
            this.destroySibling();
            this.props.navigation.navigate('GameOrder');
        }
    }
    _on_DLTLottery = () => {
        this.destroySibling();
        this.props.navigation.navigate('DLTLottery', {
            page: 2
        });
    }
    on_go_chart=()=>{
        this.destroySibling();
        this.props.navigation.navigate('DLTLottery', {
            page: 1
        });
    }
    _on_goIntroduce = () => {
        this.destroySibling();
        this.props.navigation.navigate('Introduce', {
            Content: this.state.Content
        })
    }
    _show_right_menu_model = () => {
        this.destroySibling();
        return (
            <TouchableOpacity style={Styles.sibling} onPress={this.destroySibling}>
                <View style={Styles.right_menu}>
                    <Image resizeMode="cover" style={Styles.right_menu_bg} source={require('../../../image/js_img_menu_jincai_bg.png')} />
                    <View style={{ paddingRight: 5 }}>
                        <TouchableOpacity onPress={() => this._on_goIntroduce()}>
                            <Text style={Styles.right_menu_item}>玩法介绍</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this._on_DLTLottery()}>
                            <Text style={Styles.right_menu_item}>历史开奖</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.on_go_gameorder()}>
                            <Text style={Styles.right_menu_item}>投注查询</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.on_go_chart()}>
                            <Text style={Styles.right_menu_item}>走势图</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
    show_single_type = () => {
        if (elements.length == 0) {
            let sibling = new RootSiblings(this._show_single_type_model());
            id++;
            elements.push(sibling);
        } else {
            this.destroySibling();
        }
    };
    show_right_menu = () => {
        if (elements.length == 0) {
            let sibling = new RootSiblings(this._show_right_menu_model());
            id++;
            elements.push(sibling);
        } else {
            this.destroySibling();
        }
    }
    destroySibling = () => {
        let lastSibling = elements.pop();
        lastSibling && lastSibling.destroy();
    };

    do_toast = (str, time) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        this._time = setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });
            clearTimeout(this._time);
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
    clear_bet_update() {

    }
    on_clear_bet = () => {
        this.selected_id = -1;
        this.setState({
            red_ball: [],//红球
            blue_ball: [],//篮球
            betNumber: null,
            betRecords: null,
            betCount: 0,
            betAmount: 0,
        })
    }
    renderRedQIU(PreNum) {
        let { red_ball } = this.state;
        PreNum = PreNum.split(',');
        var itemArr = [];
        for (let i = 0; i < PreNum.length; i++) {
            let data = PreNum[i];
            let state_css = Styles.number_td_text;
            if (('' + red_ball).indexOf(('' + Utils.pad(i + 1))) > -1) {
                state_css = Styles.number_td_text_on;
            }
            itemArr.push(
                <TouchableOpacity key={i} onPress={() => this.on_select_red_ball(Utils.pad(i + 1))}>
                    <View style={Styles.number_td}>
                        <Text style={state_css}>{Utils.pad(i + 1)}</Text>
                        <Text style={Styles.number_hots}>{data}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    renderRedBladder(PreNum) {
        let { red_bladder } = this.state;
        PreNum = PreNum.split(',');
        var itemArr = [];
        for (let i = 0; i < PreNum.length; i++) {
            let data = PreNum[i];
            let state_css = Styles.number_td_text;
            if (('' + red_bladder).indexOf(('' + Utils.pad(i + 1))) > -1) {
                state_css = Styles.number_td_text_on;
            }
            itemArr.push(
                <TouchableOpacity key={i} onPress={() => this.on_select_red_bladder(Utils.pad(i + 1))}>
                    <View style={Styles.number_td}>
                        <Text style={state_css}>{Utils.pad(i + 1)}</Text>
                        <Text style={Styles.number_hots}>{data}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    renderBlueQIU(PreNum) {
        let { blue_ball } = this.state;
        PreNum = PreNum.split(',');
        var itemArr = [];
        for (let i = 0; i < PreNum.length; i++) {
            let data = PreNum[i];
            let state_css = Styles.number_td_text2;
            if (('' + blue_ball).indexOf(('' + Utils.pad(i + 1))) > -1) {
                state_css = Styles.number_td_text_on2;
            }
            itemArr.push(
                <TouchableOpacity key={i} onPress={() => this.on_select_blue_ball(Utils.pad(i + 1))}>
                    <View style={Styles.number_td}>
                        <Text style={state_css}>{Utils.pad(i + 1)}</Text>
                        <Text style={Styles.number_hots}>{data}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    renderBlueBladder(PreNum) {
        let { blue_bladder } = this.state;
        PreNum = PreNum.split(',');
        var itemArr = [];
        for (let i = 0; i < PreNum.length; i++) {
            let data = PreNum[i];
            let state_css = Styles.number_td_text2;
            if (('' + blue_bladder).indexOf(('' + Utils.pad(i + 1))) > -1) {
                state_css = Styles.number_td_text_on2;
            }
            itemArr.push(
                <TouchableOpacity key={i} onPress={() => this.on_select_blue_bladder(Utils.pad(i + 1))}>
                    <View style={Styles.number_td}>
                        <Text style={state_css}>{Utils.pad(i + 1)}</Text>
                        <Text style={Styles.number_hots}>{data}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    //红球选择
    on_select_red_ball(number) {
        let { curr_single_type, red_bladder, red_ball } = this.state;
        let index = red_ball.indexOf(number);
        if (index == -1) {
            if (curr_single_type === 0) {
                if (red_ball.length >= 18) {
                    this.do_toast('红球数不能超过18个', 1000);
                    return;
                }
            }
            if (curr_single_type === 1) {
                if (red_ball.length >= 23) {
                    this.do_toast('红球数不能超过23个', 1000);
                    return;
                }
            }
            red_ball.push(number);
        } else {
            red_ball.splice(index, 1);
        }
        //去红胆重复的
        let temp = [];
        for (let i = 0; i < red_bladder.length; i++) {
            if (red_ball.indexOf(red_bladder[i]) > -1) {
                continue;
            }
            temp.push(red_bladder[i]);
        }
        this.setState({
            red_bladder: temp,
            red_ball: red_ball
        }, () => {
            this.combBetNumberConut();
        });
    }
    //随机红球选择
    on_random_select_red_ball() {
        let { Number, red_random_count } = this.state;
        let ball = [];
        while (ball.length < red_random_count) {
            let index = Utils.pad(Utils.random_int(1, 35));
            let bool = true;
            for (let i = 0; i < ball.length; i++) {
                if (index == ball[i]) {
                    bool = false;
                    break;
                }
            }
            if (bool) {
                ball.push(index);
            }
        }
        ball = ball.sort(function (a, b) { return a - b });
        this.setState({
            red_ball: ball
        }, () => {
            this.combBetNumberConut();
        });
    }
    //选择篮球
    on_select_blue_ball(number) {
        let { blue_bladder, blue_ball } = this.state;
        let index = blue_ball.indexOf(number);
        if (index == -1) {
            blue_ball.push(number);
        } else {
            blue_ball.splice(index, 1);
        }
        //去掉蓝胆重复的
        let temp = [];
        for (let i = 0; i < blue_bladder.length; i++) {
            if (blue_ball.indexOf(blue_bladder[i]) > -1) {
                continue;
            }
            temp.push(blue_bladder[i]);
        }
        this.setState({
            blue_bladder: temp,
            blue_ball: blue_ball
        }, () => {
            this.combBetNumberConut();
        });
    }
    //随机选择篮球
    on_random_select_blue_ball() {
        let { blue_randow_count } = this.state;
        let ball = [];
        while (ball.length < blue_randow_count) {
            let index = Utils.pad(Utils.random_int(1, 12));
            let bool = true;
            for (let i = 0; i < ball.length; i++) {
                if (index == ball[i]) {
                    bool = false;
                    break;
                }
            }
            if (bool) {
                ball.push(index);
            }
        }
        ball = ball.sort(function (a, b) { return a - b });
        this.setState({
            blue_ball: ball
        }, () => {
            this.combBetNumberConut();
        });
    }
    //蓝胆选择
    on_select_blue_bladder(number) {
        let { blue_bladder, blue_ball } = this.state;
        let index = blue_bladder.indexOf(number);
        if (index == -1) {
            if (blue_bladder.length >= 1) {
                this.do_toast('后胆区最多只能选择1个', 1000);
                return;
            }
            blue_bladder.push(number);
        } else {
            blue_bladder.splice(index, 1);
        }
        //去掉拖重复的
        let temp = [];
        for (let i = 0; i < blue_ball.length; i++) {
            if (blue_bladder.indexOf(blue_ball[i]) > -1) {
                continue;
            }
            temp.push(blue_ball[i]);
        }
        this.setState({
            blue_bladder: blue_bladder,
            blue_ball: temp
        }, () => {
            this.combBetNumberConut();
        });
    }
    //红球前胆选择
    on_select_red_bladder(number) {
        let { red_bladder, red_ball } = this.state;
        let index = red_bladder.indexOf(number);
        if (index == -1) {
            if (red_bladder.length >= 4) {
                this.do_toast('红胆数不能超过4个', 1000);
                return;
            }
            red_bladder.push(number);
        } else {
            red_bladder.splice(index, 1);
        }
        //去掉红拖重复的
        let temp = [];
        for (let i = 0; i < red_ball.length; i++) {
            if (red_bladder.indexOf(red_ball[i]) > -1) {
                continue;
            }
            temp.push(red_ball[i]);
        }
        this.setState({
            red_bladder: red_bladder,
            red_ball: temp
        }, () => {
            this.combBetNumberConut();
        });
    }
    //随机红球前胆
    on_random_select_red_front_bladder() {
        let { Number, red_ball, red_front_bladder_random_count } = this.state;
        let ball = [];
        while (ball.length < red_front_bladder_random_count) {
            let index = Utils.pad(Utils.random_int(1, 35));
            let bool = true;
            for (let i = 0; i < ball.length; i++) {
                if (index == ball[i]) {
                    bool = false;
                    break;
                }
            }
            if (bool) {
                ball.push(index);
            }
        }
        ball = ball.sort(function (a, b) { return a - b });
        //去掉红拖重复的
        let temp = [];
        for (let i = 0; i < red_ball.length; i++) {
            if (ball.indexOf(red_ball[i]) > -1) {
                continue;
            }
            temp.push(red_ball[i]);
        }
        this.setState({
            red_bladder: ball,
            red_ball: temp
        }, () => {
            this.combBetNumberConut();
        });
    }
    //随机红球拖
    on_random_select_red_after() {
        let { red_bladder, red_after_bladder_random_count } = this.state;
        let ball = [];
        while (ball.length < red_after_bladder_random_count) {
            let index = Utils.pad(Utils.random_int(1, 35));
            let bool = true;
            for (let i = 0; i < ball.length; i++) {
                if (index == ball[i]) {
                    bool = false;
                    break;
                }
            }
            if (bool) {
                ball.push(index);
            }
        }
        ball = ball.sort(function (a, b) { return a - b });
        //去掉红胆重复的
        let temp = [];
        for (let i = 0; i < red_bladder.length; i++) {
            if (ball.indexOf(red_bladder[i]) > -1) {
                continue;
            }
            temp.push(red_bladder[i]);
        }
        this.setState({
            red_bladder: temp,
            red_ball: ball
        }, () => {
            this.combBetNumberConut();
        });
    }
    //随机蓝胆前胆
    on_random_select_blue_front_bladder() {
        let { blue_ball, blue_front_bladder_random_count } = this.state;
        let ball = [];
        while (ball.length < blue_front_bladder_random_count) {
            let index = Utils.pad(Utils.random_int(1, 12));
            let bool = true;
            for (let i = 0; i < ball.length; i++) {
                if (index == ball[i]) {
                    bool = false;
                    break;
                }
            }
            if (bool) {
                ball.push(index);
            }
        }
        ball = ball.sort(function (a, b) { return a - b });
        //去掉蓝拖重复的
        let temp = [];
        for (let i = 0; i < blue_ball.length; i++) {
            if (ball.indexOf(blue_ball[i]) > -1) {
                continue;
            }
            temp.push(blue_ball[i]);
        }
        this.setState({
            blue_bladder: ball,
            blue_ball: temp
        }, () => {
            this.combBetNumberConut();
        });

    }
    //随机篮球拖
    on_random_select_blue_after() {
        let { blue_bladder, blue_after_bladder_random_count } = this.state;
        let ball = [];
        while (ball.length < blue_after_bladder_random_count) {
            let index = Utils.pad(Utils.random_int(1, 12));
            let bool = true;
            for (let i = 0; i < ball.length; i++) {
                if (index == ball[i]) {
                    bool = false;
                    break;
                }
            }
            if (bool) {
                ball.push(index);
            }
        }
        ball = ball.sort(function (a, b) { return a - b });
        //去掉红胆重复的
        let temp = [];
        for (let i = 0; i < blue_bladder.length; i++) {
            if (ball.indexOf(blue_bladder[i]) > -1) {
                continue;
            }
            temp.push(blue_bladder[i]);
        }
        this.setState({
            blue_bladder: temp,
            blue_ball: ball
        }, () => {
            this.combBetNumberConut();
        });
    }
    biaozhunBetNumberComb() {
        let { Number, red_ball, blue_ball } = this.state;
        if (red_ball.length < 5 || blue_ball.length < 2) {
            this.setState({
                BetNumber: null,
                betRecords: null,
                betCount: 0,
                betAmount: 0
            })
            return;
        }
        let type = null;
        if (red_ball.length == 5 && blue_ball.length == 2) {
            type = BETTYPE.One;
        } else {
            type = BETTYPE.Multiple
        }
        let { BetNumber, betRecords, betCount, betAmount } = DLTBall.betNumberComb(type, Number, [], red_ball, [], blue_ball, 1);
        
        return {
            BetNumber: BetNumber,
            betRecords: betRecords,
            betCount: betCount,
            betAmount: betAmount
        }
    }
    bladderbetNumberComb() {
        let { Number, red_bladder, red_ball, blue_bladder, blue_ball } = this.state;
        if ( red_ball.length < 2 || blue_ball.length < 2 || (red_bladder.length + red_ball.length) < 5 || (blue_bladder.length + blue_ball.length) < 2) {
            this.setState({
                BetNumber: null,
                betRecords: null,
                betCount: 0,
                betAmount: 0
            })
            return;
        }
        let { BetNumber, betRecords, betCount, betAmount } = DLTBall.betNumberComb(BETTYPE.Bladder, Number, red_bladder, red_ball, blue_bladder, blue_ball, 1);
        return {
            BetNumber: BetNumber,
            betRecords: betRecords,
            betCount: betCount,
            betAmount: betAmount
        }

    }
    combBetNumberConut() {
        let { curr_single_type, Number, red_bladder,red_ball,blue_bladder, blue_ball } = this.state;
        let red_ball_count = 0, blue_ball_count = 0;
        switch (curr_single_type) {
            case 0:
                if (red_ball.length < 5 || blue_ball.length < 2) {
                    this.setState({
                        BetNumber: null,
                        betRecords: null,
                        betCount: 0,
                        betAmount: 0
                    })
                    return;
                }
                red_ball_count = DLTBall.getComNum(red_ball.length, 5);
                blue_ball_count = DLTBall.getComNum(blue_ball.length, 2);
                this.setState({
                    betCount: red_ball_count * blue_ball_count,
                    betAmount: red_ball_count * blue_ball_count * 2
                });

                break;
            case 1:
                if (red_ball.length < 5 || blue_ball.length < 2 || (red_bladder.length + red_ball.length) < 5 || (blue_bladder.length + blue_ball.length) < 2) {
                    this.setState({
                        BetNumber: null,
                        betRecords: null,
                        betCount: 0,
                        betAmount: 0
                    })
                    return;
                }
                if (red_bladder.length == 0) {
                    red_ball_count = DLTBall.getComNum(red_ball.length, 5);
                } else {
                    red_ball_count = DLTBall.redDanCountTable[red_bladder.length][red_ball.length];
                }
                if (blue_bladder.length == 0) {
                    blue_ball_count = DLTBall.getComNum(blue_ball.length, 2);
                }else{
                    blue_ball_count = DLTBall.blueDanCountTable[blue_bladder.length][blue_ball.length];
                }
                this.setState({
                    betCount: red_ball_count * blue_ball_count,
                    betAmount: red_ball_count * blue_ball_count * 2
                });
                break;
        }
    }
    betNumberComb() {
        let { curr_single_type} = this.state;
        switch (curr_single_type) {
            case 0:
                return this.biaozhunBetNumberComb();
                break;
            case 1:
                return this.bladderbetNumberComb();
                break;
        }
    }
    on_change_random_count = (type) => {
        // red_random_count: 5,//红球随机数量
        // blue_randow_count: 2,//蓝球随机数量
        // red_front_bladder_random_count: 1,//红球胆码选择0-4
        // red_after_bladder_random_count: 5,//红球拖码2-35
        // blue_front_bladder_random_count: 1,//蓝球胆码选择0-1
        // blue_after_bladder_random_count: 2,//蓝球拖码2-12
        let { popup_state } = this.state;
        if (popup_state[type] === 1) {
            popup_state[type] = 0;
        } else {
            popup_state.fill(0);
            popup_state[type] = 1;
        }
        this.setState({
            popup_state: popup_state
        });

    }
    //修改随机数字
    on_set_random_count(type, num) {
        switch (type) {
            case 0:
                this.setState({
                    red_random_count: num
                }, () => {
                    this.on_random_select_red_ball();
                });
                break;
            case 1:
                this.setState({
                    blue_randow_count: num
                }, () => {
                    this.on_random_select_blue_ball();
                });
                break;
            case 2:
                this.setState({
                    red_front_bladder_random_count: num
                }, () => {
                    this.on_random_select_red_front_bladder();
                });
                break;
            case 3:
                this.setState({
                    red_after_bladder_random_count: num
                }, () => {
                    this.on_random_select_red_after();
                });
                break;
            case 4:

                break;
            case 5:
                this.setState({
                    blue_after_bladder_random_count: num
                }, () => {
                    this.on_random_select_blue_after();
                });
                break;
        }
        this.setState({
            popup_state: new Array(6).fill(0)
        });
    }
    //随机数字
    renderRandowCount(type, begin, end) {
        var itemArr = [];
        for (let i = begin; i <= end; i++) {
            itemArr.push(
                <TouchableOpacity key={i} onPress={() => this.on_set_random_count(type, i)}>
                    <View style={{ width: 40, height: 40, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                        <Text>{i}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    biaozhun_bet = () => {
        let { PreNum, red_random_count, blue_randow_count, popup_state } = this.state;
        PreNum = PreNum.split('|');
        return (
            <ScrollView>
                <View>
                    <View style={Styles.head_qiu_type}>
                        <Text style={Styles.head_number_text1}>红球区(至少选择5个球)</Text>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingRight: 16, }}>
                            <TouchableOpacity onPress={() => this.on_change_random_count(0)}>
                                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#cccccc', borderRightWidth: 0, borderTopLeftRadius: 5, borderBottomLeftRadius: 5, width: 60, height: 30, color: '#434343', fontSize: 14 }}>
                                    <Text style={[Styles.head_number_text1, { paddingLeft: 10, paddingRight: 10 }]}>{red_random_count}</Text>
                                    <Image resizeMode="cover" source={require('../../../image/js_img_btn_pulldown.png')} />
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.on_random_select_red_ball()}>
                                <Text style={{ borderWidth: 1, borderColor: '#cccccc', borderTopRightRadius: 5, borderBottomRightRadius: 5, width: 76, height: 30, color: '#434343', fontSize: 14, lineHeight: 30, textAlign: 'center' }}>机选号码</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={Styles.number_qiu}>
                        {this.renderRedQIU(PreNum[0])}
                    </View>
                    {popup_state[0] === 1 ?
                        <View style={Styles.popup}>
                            {this.renderRandowCount(0, 5, 18)}
                        </View>
                        :
                        null
                    }
                </View>
                <View>
                    <View style={Styles.head_qiu_type}>
                        <Text style={Styles.head_number_text1}>蓝球区(至少选择2个球)</Text>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingRight: 16, }}>
                            <TouchableOpacity onPress={() => this.on_change_random_count(1)}>
                                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#cccccc', borderRightWidth: 0, borderTopLeftRadius: 5, borderBottomLeftRadius: 5, width: 60, height: 30, color: '#434343', fontSize: 14 }}>
                                    <Text style={[Styles.head_number_text1, { paddingLeft: 10, paddingRight: 10 }]}>{blue_randow_count}</Text>
                                    <Image resizeMode="cover" source={require('../../../image/js_img_btn_pulldown.png')} />
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.on_random_select_blue_ball()}>
                                <Text style={{ borderWidth: 1, borderColor: '#cccccc', borderTopRightRadius: 5, borderBottomRightRadius: 5, width: 76, height: 30, color: '#434343', fontSize: 14, lineHeight: 30, textAlign: 'center' }}>机选号码</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={Styles.number_qiu}>
                        {this.renderBlueQIU(PreNum[1])}
                    </View>
                    {popup_state[1] === 1 ?
                        <View style={Styles.popup}>
                            {this.renderRandowCount(1, 2, 12)}
                        </View>
                        :
                        null
                    }
                </View>
            </ScrollView>
        );
    }
    dantuo_bet = () => {
        let { popup_state, PreNum, red_front_bladder_random_count, red_after_bladder_random_count, blue_front_bladder_random_count, blue_after_bladder_random_count } = this.state;
        PreNum = PreNum.split('|');
        return (
            <ScrollView>
                <View>
                    <View style={Styles.head_qiu_type}>
                        <Text style={Styles.head_number_text1}>前区胆码(选择0~4个球)</Text>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingRight: 16, }}>
                            <TouchableOpacity onPress={() => this.on_change_random_count(2)}>
                                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#cccccc', borderRightWidth: 0, borderTopLeftRadius: 5, borderBottomLeftRadius: 5, width: 60, height: 30, color: '#434343', fontSize: 14 }}>
                                    <Text style={[Styles.head_number_text1, { paddingLeft: 10, paddingRight: 10 }]}>{red_front_bladder_random_count}</Text>
                                    <Image resizeMode="cover" source={require('../../../image/js_img_btn_pulldown.png')} />
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.on_random_select_red_front_bladder()}>
                                <Text style={{ borderWidth: 1, borderColor: '#cccccc', borderTopRightRadius: 5, borderBottomRightRadius: 5, width: 76, height: 30, color: '#434343', fontSize: 14, lineHeight: 30, textAlign: 'center' }}>机选号码</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={Styles.number_qiu}>
                        {this.renderRedBladder(PreNum[0])}
                    </View>
                    {popup_state[2] === 1 ?
                        <View style={Styles.popup}>
                            {this.renderRandowCount(2, 0, 4)}
                        </View>
                        :
                        null
                    }
                </View>

                <View>
                    <View style={Styles.head_qiu_type}>
                        <Text style={Styles.head_number_text1}>前区拖码(至少选择2个球)</Text>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingRight: 16, }}>
                            <TouchableOpacity onPress={() => this.on_change_random_count(3)}>
                                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#cccccc', borderRightWidth: 0, borderTopLeftRadius: 5, borderBottomLeftRadius: 5, width: 60, height: 30, color: '#434343', fontSize: 14 }}>
                                    <Text style={[Styles.head_number_text1, { paddingLeft: 10, paddingRight: 10 }]}>{red_after_bladder_random_count}</Text>
                                    <Image resizeMode="cover" source={require('../../../image/js_img_btn_pulldown.png')} />
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.on_random_select_red_after()}>
                                <Text style={{ borderWidth: 1, borderColor: '#cccccc', borderTopRightRadius: 5, borderBottomRightRadius: 5, width: 76, height: 30, color: '#434343', fontSize: 14, lineHeight: 30, textAlign: 'center' }}>机选号码</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={Styles.number_qiu}>
                        {this.renderRedQIU(PreNum[0])}
                    </View>
                    {popup_state[3] === 1 ?
                        <View style={Styles.popup}>
                            {this.renderRandowCount(3, 2, 23)}
                        </View>
                        :
                        null
                    }
                </View>
                <View>
                    <View style={Styles.head_qiu_type}>
                        <Text style={Styles.head_number_text1}>后区胆码(选择0~1个球)</Text>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingRight: 16, }}>
                            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#cccccc', borderRightWidth: 0, borderTopLeftRadius: 5, borderBottomLeftRadius: 5, width: 60, height: 30, color: '#434343', fontSize: 14 }}>
                                <Text style={[Styles.head_number_text1, { paddingLeft: 10, paddingRight: 10 }]}>{blue_front_bladder_random_count}</Text>
                                <Image resizeMode="cover" source={require('../../../image/js_img_btn_pulldown.png')} />
                            </View>
                            <TouchableOpacity onPress={() => this.on_random_select_blue_front_bladder()}>
                                <Text style={{ borderWidth: 1, borderColor: '#cccccc', borderTopRightRadius: 5, borderBottomRightRadius: 5, width: 76, height: 30, color: '#434343', fontSize: 14, lineHeight: 30, textAlign: 'center' }}>机选号码</Text>
                            </TouchableOpacity>

                        </View>
                    </View>
                    <View style={Styles.number_qiu}>
                        {this.renderBlueBladder(PreNum[1])}
                    </View>
                </View>
                <View>
                    <View style={Styles.head_qiu_type}>
                        <Text style={Styles.head_number_text1}>后区拖码(至少选择2个球)</Text>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingRight: 16, }}>
                            <TouchableOpacity onPress={() => this.on_change_random_count(5)}>
                                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#cccccc', borderRightWidth: 0, borderTopLeftRadius: 5, borderBottomLeftRadius: 5, width: 60, height: 30, color: '#434343', fontSize: 14 }}>
                                    <Text style={[Styles.head_number_text1, { paddingLeft: 10, paddingRight: 10 }]}>{blue_after_bladder_random_count}</Text>
                                    <Image resizeMode="cover" source={require('../../../image/js_img_btn_pulldown.png')} />
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.on_random_select_blue_after()}>
                                <Text style={{ borderWidth: 1, borderColor: '#cccccc', borderTopRightRadius: 5, borderBottomRightRadius: 5, width: 76, height: 30, color: '#434343', fontSize: 14, lineHeight: 30, textAlign: 'center' }}>机选号码</Text>
                            </TouchableOpacity>

                        </View>
                    </View>
                    <View style={Styles.number_qiu}>
                        {this.renderBlueQIU(PreNum[1])}
                    </View>
                    {popup_state[5] === 1 ?
                        <View style={Styles.popup}>
                            {this.renderRandowCount(5, 2, 12)}
                        </View>
                        :
                        null
                    }
                </View>
            </ScrollView>
        );
    }
    render_bet() {
        let { curr_single_type } = this.state;
        switch (curr_single_type) {
            case 0:
                return this.biaozhun_bet();
                break;
            case 1:
                return this.dantuo_bet();
                break;
        }
    }
    on_add_DLTBox() {
        let { BetNumber, betRecords, red_ball, blue_ball, betCount, betAmount } = this.state;
        if (red_ball.length < 5 || blue_ball.length < 2) {
            this.do_toast('请至少选择一注', 1000);
            return;
        }
        if (betCount > 10000) {
            this.do_toast('不能大于10000注', 1000);
            return;
        }
        let obj = this.betNumberComb();
        let count = Ugame.addDLTBox(obj);
        this.setState({
            DLTBox_count: count,
            red_bladder: [],
            blue_bladder: [],
            red_ball: [],//红球
            blue_ball: [],//篮球
            betCount: 0,
            betAmount: 0,
        });
    }
    on_DLT_box() {
        this.props.navigation.navigate('DLTBox',{
            Number:this.state.Number
        });
    }
    on_DLTBetList() {
        if(this.countdown==0){
            this.do_toast('截止时间已到', 1000);
            return;
        }
        let { curr_single_type, red_ball, blue_ball, red_bladder, blue_bladder, Number, BetNumber, betRecords, betCount, betAmount } = this.state;

        if (betCount >= 10000) {
            this.do_toast('不能大于10000注', 1000);
            return;
        }
        if (curr_single_type === 0) {
            if (red_ball.length < 5 || blue_ball.length < 2) {
                this.do_toast('请至少选择一注', 1000);
                return;
            }
        } else {
            if (red_ball.length < 2 || blue_ball.length < 2) {
                this.do_toast('请至少选择一注', 1000);
                return;
            }
            if ((red_bladder.length + red_ball.length) < 5 || (blue_bladder.length + blue_ball.length) < 2) {
                this.do_toast('请至少选择一注', 1000);
                return;
            }
        }

        if (!Ugame.isLogin()) {
            this.props.navigation.navigate('Login');
            return;
        }
        let obj = this.betNumberComb();
        let array = [obj];
        if (this.selected_id == -1) {
            Ugame.addDLTSelectList(array);
        } else {
            Ugame.DLTSelectList[this.selected_id] = array[0];
        }
        this.props.navigation.navigate('DLTBetList', {
            Number: Number
        });
        this.on_clear_bet();
    }
    onCountDownOver=()=>{
        this.countdown = 0;
    }
    render() {
        let { Number, Opentime, PreNum, nowtime, countdowning, betCount, betAmount, red_random_count, blue_randow_count, DLTBox_count } = this.state;
        if (Number == '') {
            return (
                <View></View>
            );
        }

        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <View style={Styles.head_number}>
                    <CountDown leftText={"第2020036期"} rightText={"截止时间："} onCountDownOver={()=>this.onCountDownOver()} countTime={this.countdown} />
                </View>
                {this.render_bet()}

                <View style={Styles.viewBottom}>
                    <View style={{ flexDirection: 'row', justifyContent: 'flex-start', paddingLeft: 16 }}>
                        <Text style={{ color: '#666666' }}>共</Text>
                        <Text style={{ color: '#d0162e' }}>{betCount}</Text>
                        <Text style={{ color: '#666666' }}>注</Text>
                        <Text style={{ color: '#d0162e' }}>{betAmount}</Text>
                        <Text style={{ color: '#666666' }}>元</Text>
                    </View>
                    <View style={Styles.viewBottomMenu}>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                            <TouchableOpacity onPress={() => this.on_clear_bet()}>
                                <Image resizeMode="cover" source={require('../../../image/js_img_tab_icon_clear.png')} />
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.on_DLT_box()}>
                                <View style={{ marginLeft: 20, marginRight: 20 }}>
                                    <Image resizeMode="cover" source={require('../../../image/js_img_tab_icon_cart.png')} />
                                    {DLTBox_count > 0 ?
                                        <Text style={{ position: 'absolute', top: -10, right: 0, width: 15, height: 15, borderRadius: 15, backgroundColor: '#d0162e', fontSize: 10, color: '#ffffff', textAlign: 'center', lineHeight: 15 }}>
                                            {DLTBox_count}
                                        </Text> : null
                                    }
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.on_add_DLTBox()}>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', borderWidth: 1, borderColor: '#cccccc', borderRadius: 20, paddingTop: 5, paddingBottom: 5, paddingLeft: 10, paddingRight: 10 }}>
                                    <Image resizeMode="cover" source={require('../../../image/js_img_sub_icon_add.png')} />
                                    <Text style={{ fontSize: 14 }}> 号码蓝</Text>
                                </View>
                            </TouchableOpacity>

                        </View>
                        <TouchableOpacity onPress={() => this.on_DLTBetList()}>
                            <Text style={{ width: 80, height: 30, backgroundColor: '#d0162e', color: '#ffffff', textAlign: 'center', lineHeight: 30, fontSize: 14, borderRadius: 5 }}>投注</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                {this.toast()}
            </View>
        )
    }
}

